<template>
    <el-dialog v-model="visible" :title="title" width="500px" >
        <el-form :model="formData" ref="formRef" :rules="rules" label-width="80px" v-loading="loading">
            <el-form-item label="角色编码" prop="code">
                <el-input v-model="formData.code" placeholder="请输入角色编码" />
            </el-form-item>
            <el-form-item label="角色名称" prop="name">
                <el-input v-model="formData.name" placeholder="请输入角色名称" />
            </el-form-item>
            <el-form-item label="数据权限" prop="dataScope">
                <el-select v-model="formData.dataScope" placeholder="请选择数据权限">
                    <el-option v-for="item in dataScopeList" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="分配权限" prop="permIds">
                <div style="overflow: auto; max-height: calc(100vh - 540px);width: 400px;">
                    <el-tree default-expand-all node-key="id" ref="treeRef" :data="sysPermTree"
                        :props="{ label: 'name' }" show-checkbox />
                </div>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="formData.name" placeholder="请输入备注" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="close">取消</el-button>
                <el-button type="primary" @click="addOrUpdate">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { addReq, updateReq, queryPermIdsReq } from '@/api/sys/role/index.js'

const visible = ref(false)

const formData = reactive({
    id: '',
    code: '',
    name: '',
    dataScope: '',
    remark: '',
    permIds: []
})

const rules = reactive({
    code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }],
    name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
    dataScope: [{ required: true, message: '请选择数据权限', trigger: 'blur' }],
    permIds: [{ required: true, message: '请分配角色权限', trigger: 'blur' }],
})

const dataScopeList = ref([
    { label: '本人权限', value: '1' },
    { label: '本部门权限', value: '2' },
    { label: '所有数据权限', value: '3' },
])

const props = defineProps({
    querySelective: Function,
    sysPermTree: Array
})

const title = ref('')
const actionType = ref('')
const permIds = ref([])
const loading = ref(false)
const open = (type, row) => {
    if (type == 'add') {
        actionType.value = type
        title.value = '添加角色'
        formData.code = ''
        formData.name = ''
        formData.dataScope = ''
        formData.remark = ''
        formData.permIds = []
        formRef.value?.resetFields()
        treeRef.value?.setCheckedKeys([])
        visible.value = true;
    }
    if (type == 'update') {
        actionType.value = type
        title.value = '修改角色'
        formData.id = row.id
        formData.code = row.code
        formData.name = row.name
        formData.dataScope = row.dataScope
        formData.remark = row.remark
        formData.permIds = row.permIds
        permIds.value = []
        visible.value = true;
        loading.value = true;
        queryPermIdsReq(row.id).then(res => {
            if (res.code == 200) {
                permIds.value = res.data
                treeRef.value?.setCheckedKeys(permIds.value)
            }
        }).finally(() => {
            loading.value = false
        })
    }

}

defineExpose({
    open
})


const close = () => {
    visible.value = false;
}

const formRef = ref()
const treeRef = ref()
const addOrUpdate = async () => {
    // 获取到permIds
    const permIds = treeRef.value?.getCheckedKeys()
    console.log("permIds", permIds)
    formData.permIds = permIds;
    const valid = await formRef.value?.validate() // 改变这一行
    if (valid) {
        if (actionType.value == 'add') {
            const res = await addReq(formData);
            if (res.code == 200) {
                // 添加成功！
                ElMessage.success(res.message)
                // 查询角色列表
                props.querySelective();
                close();
            }
        }
        if (actionType.value == 'update') {
            const res = await updateReq(formData);
            if (res.code == 200) {
                // 添加成功！
                ElMessage.success(res.message)
                // 查询角色列表
                props.querySelective();
                close();
            }
        }
    }
}
</script>